<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app1{
       display: flex;
    }
    *{
        margin: 0 auto;
        padding: 0;
    }
    #majorBkock{ 
        height: 400px;
        width: 500px;
        
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   
    }
    #head { 
     
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    
    }
    #tail{
        width: 250px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>
<body id="app">
    <!-- ### 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
	<!-- 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
	

	<div id="app1">
			<div id="majorBkock" v-for="(object,index) in object" >
		<div v-if=""></div>
			<div id="head">
			
            <img :src="object.img" >
            <span >{{object.name}}</span>
            <span>买贵必赔|12期免息 商品数量：{{object.total}}</span>
        </div>
        <div id="tail">
            <span >￥{{object.money}}</span>
           <button @click="scdx">立即购买</button>
        </div>
	
        <input type="text" v-model=object.buy >
    </div>
	</div>
	<span>{{object.id}}</span>


</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js">

</script>
<script>
 let app= Vue.createApp({
    data:function () {
        return{
		
            object :[
                {
					id:1,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:500,
					total:500,
					buy:0,
                },
                {
					id:2,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:500,
					total:100,
					buy:0,
                },
                {
					id:3,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:500,
					total:100,
					buy:0,
                }, 
                {
				id:4,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:500,
					total:100,
					buy:0,
                },
                 {
					 id:5,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:500,
					total:100,
					buy:0,
                },
            ],
       
          
        
        }
    },
	methods: {
		
		 scdx(){
		
			 for (var i = 0; i < this. object.length; i++) {
				 if(this.object[i].total>0){
					  console.log(this.object[i].total);
			console.log(this.object[i].buy);
				sun=Number(this.object[i].total)-Number(this.object[i].buy)
			
			this.object[i].total=sun
				 }else{
					this.object[i].total=0 
				 }
				
				}
				
				
				
				
				
			 }
			
			
		
		
			
		
	},
	
});

app.mount("#app");
</script>
</html>